<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="addTeam">添加队伍</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="添加" :visible.sync="dialogFormVisiblea" width="20%">
     <el-form ref="form" :model="form" label-position="left" label-width="100px">
           <!-- <el-form-item label="Code" :label-width="formLabelWidth">
             <el-input v-model="form.code" autocomplete="off"></el-input>
           </el-form-item> -->
           <el-form-item label="队伍名" :label-width="formLabelWidth">
             <el-input v-model="form.name" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" size="mini" @click="onSubmitAdd">确定</el-button>
             <el-button size="mini" @click="Cancel">取消</el-button>
           </el-form-item>
     </el-form>
    </el-dialog>
    <el-table
       :data="tableData"
       style="width: 100%">
       <el-table-column
         label="TeamID"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.teamID }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="排行"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.rank }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="关卡"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.spot }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="地图"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.land }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="名字"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="金子"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.gold }}</span>
         </template>
       </el-table-column>
       <el-table-column
         label="数量"
         width="100">
         <template slot-scope="scope">
           <span>{{ scope.row.count }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="primary"
             @click="handleupdate(scope.$index)">修改</el-button>
             <el-button
               size="mini"
               type="primary"
               @click="handlelook(scope.row.teamID)">查看</el-button>
           <el-button
             size="mini"
             type="primary"
             @click="handlesparate(scope.row.teamID)">解散</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-dialog title="队员" :visible.sync="dialogTableVisibles">
       <el-table :data="member">
         <el-table-column property="header" label="头像" width="150"></el-table-column>
         <el-table-column property="playerID" label="玩家ID" width="150"></el-table-column>
         <el-table-column property="name" label="姓名" width="200"></el-table-column>
         <el-table-column property="dept" label="部门"></el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button
               size="mini"
               type="primary"
               @click="handleout(scope.$index, scope.row)">踢出</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-dialog>

     <el-dialog title="修改" :visible.sync="dialogFormVisible" width="20%">
      <el-form ref="forms" :model="forms" label-position="left" label-width="100px">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="forms.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="关卡" :label-width="formLabelWidth">
              <el-input v-model="forms.spot" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地图" :label-width="formLabelWidth">
              <el-input v-model="forms.land" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="金子" :label-width="formLabelWidth">
              <el-input v-model="forms.gold" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="onSubmiUpdate">修改</el-button>
              <el-button size="mini" @click="Cancel">取消</el-button>
            </el-form-item>
      </el-form>
     </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Method from '@/utils/proto'
import {posts} from '@/api/api'

export default {
    data() {
      return {
        tableData: [],
        member:[],
        formInline: {
           code: '',
        },
        form:{
          method:Method.Method.MSG_AGENT_TEAM_ADD,
          token:this.$store.getters.token,
          code:'',
          name:''
        },
         forms:{
          method:Method.Method.MSG_AGENT_TEAM_UPDATE,
          token:this.$store.getters.token,
          code:'',
          name:'',
          spot:'',
          logo:'',
          teamID:'',
          land:'',
          gold:'',
        },
        dialogFormVisiblea:false,
        dialogFormVisible:false,
        dialogTableVisibles:false,
        formLabelWidth: '100px',
      }
    },
    methods: {
      handleupdate(index) {
         this.dialogFormVisible=true
         this.forms.teamID = this.tableData[index].teamID
         this.forms.name = this.tableData[index].name
         this.forms.spot = this.tableData[index].spot
         this.forms.land = this.tableData[index].land
         this.forms.gold = this.tableData[index].gold
      },

      handlesparate(teamID) {
        let data={
          method:Method.Method.MSG_AGENT_TEAM_DISMISS,
          token:this.$store.getters.token,
          code:'',
          teamID:teamID,
        }
      this.$confirm("此操作将踢出该队伍, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      }).then(() => {
          posts(data).then((res) => {
              if (res.result == 0) {
                this.$message({
                  type: "success",
                  message: "踢出成功!",
                });
                this.onloadList()
              } else {
                this.$message({
                  type: "info",
                  message: "踢出失败",
                });
              }
            })
            .catch();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消踢出",
          });
        });
      },
      handlelook(teamID){
         this.dialogTableVisibles=true
         let data={
          method:Method.Method.MSG_AGENT_TEAM_CREW,
          token:this.$store.getters.token,
          code:'',
          teamID:teamID
         }
         posts(data).then((res) => {
            this.member = res.list
           console.log(res,'look');
      }).catch()
      },
      handleout(){
        let data = {
          method:Method.Method.MSG_AGENT_TEAM_KICK,
          token:this.$store.getters.token,
          code:'',
          teamID:'',
          playerID:''
        }
        posts(data).then((res) => {
      }).catch()
      },
      addTeam(){
        this.dialogFormVisiblea=true
        
      },
      onSubmiUpdate(){
        posts(this.forms).then((res) => {
          if(res.result == 0){
             this.$message({
            type: "success",
            message: "修改成功",
          });
          this.onloadList()
          }
          this.dialogFormVisible = false
          console.log(res);
      }).catch()
      },
      onSubmitAdd(){
        posts(this.form).then((res) => {
          if(res.result == 0){
                         this.$message({
            type: "success",
            message: "添加成功",
          });
          this.onloadList()
          }
          this.dialogFormVisiblea=false
          console.log(res,'add');
        }).catch()  
      },
      Cancel(){
        this.dialogFormVisiblea=false
        this.dialogFormVisible=false
      },
      onloadList(){
         let data = {
          method:Method.Method.MSG_AGENT_TEAM_LIST,
          token:this.$store.getters.token,
          code:this.formInline.code
        }
        posts(data).then((res) => {
          console.log(res,'team');
          this.tableData =  res.list
        }).catch()  
      }
    },
     created: function(){
      this.onloadList()
       
     },
  }
</script>

<style lang="scss" scoped>

</style>
